<!--设备管理-->
<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <!--搜索条件-->
            <el-row class="text-left">

                <el-col :span="15">
                    <div class="dlblock-mb20">
                        <span class="pr5">设备编号</span>
                        <el-input :maxlength="20" clearable placeholder="车牌或自编号"
                                  show-word-limit
                                  size="medium" style="width: 150px;" v-model.trim="query.no"></el-input>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">设备类型</span>
                        <el-select clearable
                                   placeholder="请选择"
                                   style="width: 150px"
                                   v-model="query.deviceType">
                            <el-option v-for="item in deviceTypeEnum"
                                       :key="item.value"
                                       :label="item.name"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">机构名称</span>
                        <el-cascader
                                v-model="query.groupId"
                                :show-all-levels="false"
                                :options="groupTree"
                                :props="{ value: 'orgId', label: 'orgName',checkStrictly: true }"
                                clearable></el-cascader>
                    </div>

                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="query.page = 1,queryDevice()" circle class="el-icon-search ml5"></el-button>
                    </div>
                </el-col>

                <el-col :span="9" align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button @click="dialogVisible = true" type="primary">添加</el-button>
                    </div>

                    <div class="dlblock-mb20 pr10">
                        <el-button @click="deleteAll" type="danger">删除</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="downloadBtn()" type="primary">下载模板</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-upload
                                :auto-upload="false"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                action="http://192.168.1.21:2563/api/web/taxi/ba/device/importDevice"
                                class="text-right"
                                name="file"
                                ref="upload">
                            <el-button size="medium" slot="trigger" type="primary">模板导入</el-button>
                            <el-button @click="submitUpload" size="medium" style="margin-left: 10px;" type="success">
                                确定导入
                            </el-button>
                        </el-upload>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="exportDevice" type="info">导出列表</el-button>
                    </div>

                </el-col>

            </el-row>

            <!--弹出对话框-->
            <el-dialog
                    :before-close="handleClose"
                    :visible.sync="dialogVisible"
                    title="设备管理"
                    width="60%">

                <!--标签页-->
                <el-tabs @tab-click="handleClick" v-model="activeName">
                    <el-tab-pane label="基本信息" name="first">
                        <el-form :model="form" :rules="rules" label-position="right" label-width="150px"
                                 ref="ruleForm">
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="设备编号" prop="no">
                                        <el-input clearable maxlength="20" placeholder="请输入内容"
                                                  show-word-limit
                                                  style="width: 250px"
                                                  v-model.trim="form.no"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item :rules="[
                                                      { required: true, message: '手机号不能为空'},]"
                                                  label="设备手机号"
                                                  prop="phone">
                                        <el-input clearable maxlength="20" placeholder="请输入内容"
                                                  show-word-limit
                                                  style="width: 250px"
                                                  v-model.number="form.phone"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="设备制造商" prop="manufacturer">
                                        <el-input clearable maxlength="20" placeholder="请输入内容"
                                                  show-word-limit
                                                  style="width: 250px"
                                                  v-model.trim="form.manufacturer"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="设备品牌" prop="brand">
                                        <el-input clearable maxlength="20" placeholder="请输入内容"
                                                  show-word-limit
                                                  style="width: 250px"
                                                  v-model.trim="form.brand"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="机构名称" prop="groupId">
                                        <el-cascader
                                                @change="getVehicle"
                                                v-model="groupId"
                                                :show-all-levels="false" style="width: 250px"
                                                :options="groupTree"
                                                :props="{ value: 'orgId', label: 'orgName',checkStrictly: true }"
                                                clearable></el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="设备类型" prop="deviceType">
                                        <el-select clearable
                                                   placeholder="请选择"
                                                   style="width: 250px"
                                                   v-model="form.deviceType">
                                            <el-option v-for="item in deviceTypeEnum"
                                                       :key="item.value"
                                                       :label="item.name"
                                                       :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="绑定车辆">
                                        <el-select clearable
                                                   placeholder="请选择"
                                                   style="width: 250px"
                                                   v-model="form.vehicleId">
                                            <el-option v-for="item in vehicles"
                                                       :key="item.id"
                                                       :label="item.no"
                                                       :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="其他信息" name="second">
                        <el-form label-position="right" label-width="150px">
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="定位装置类型">
                                        <el-select style="width: 250px" v-model="form.locatorType" clearable
                                                   placeholder="请选择">
                                            <el-option :value="0" label="无定位装置"></el-option>
                                            <el-option :value="1" label="GPS定位系统"></el-option>
                                            <el-option :value="2" label="北斗定位系统"></el-option>
                                            <el-option :value="3" label=" GPS和北斗定位系统"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="入网类型">
                                        <el-select style="width: 250px" v-model="form.networkType" clearable
                                                   placeholder="请选择">
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="通信类型">
                                        <el-select style="width: 250px" v-model="form.communType" clearable
                                                   placeholder="请选择">
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="协议类型">
                                        <el-select style="width: 250px" v-model="form.protocolType" clearable
                                                   placeholder="请选择">
                                            <el-option :value="1" label="JT808协议"></el-option>
                                            <el-option :value="2" label="Lanz私有协议"></el-option>
                                            <el-option :value="3" label="Lanz定制协议"></el-option>
                                            <el-option :value="4" label="海康扩展的JT808协议"></el-option>
                                            <el-option :value="5" label="青研扩展的JT808协议"></el-option>
                                            <el-option :value="6" label="锐明扩展的JT808协议"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="是否支持差分定位">
                                        <el-select style="width: 250px" v-model="form.differential" clearable
                                                   placeholder="请选择">
                                            <el-option :value="1" label="不支持"></el-option>
                                            <el-option :value="2" label="支持"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="摄像头数">
                                        <el-input clearable maxlength="10"
                                                  show-word-limit style="width: 250px"
                                                  v-model.number="form.cameras"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="此设备的限速值">
                                        <el-input clearable maxlength="10"
                                                  show-word-limit style="width: 250px"
                                                  v-model.number="form.limitSpeed"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="流量限制1">
                                        <el-input clearable maxlength="10"
                                                  show-word-limit style="width: 250px"
                                                  v-model.number="form.limitFlow1"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="流量限制2">
                                        <el-input clearable maxlength="10"
                                                  show-word-limit style="width: 250px"
                                                  v-model.number="form.limitFlow2"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>

                <span class="dialog-footer" slot="footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="addDevice('ruleForm')" type="primary">确 定</el-button>
                </span>
            </el-dialog>

            <!--表格-->
            <el-row>
                <el-table
                        :data="deviceList"
                        :header-row-class-name="'my-table-header'" @selection-change="selectionchange"
                        border
                        class="my-table"
                        ref="myTable"
                        stripe
                        v-loading="loading">
                    <el-table-column align="center" fixed type="selection" width="80">
                    </el-table-column>
                    <el-table-column align="center" label="ID" prop="id" v-if="false"></el-table-column>
                    <el-table-column align="center" label="机构名称" prop="groupName"></el-table-column>
                    <el-table-column align="center" label="制造商" prop="manufacturer"></el-table-column>
                    <el-table-column align="center" label="品牌" prop="brand"></el-table-column>
                    <el-table-column align="center" label="设备编号" prop="no"></el-table-column>
                    <el-table-column align="center" label="绑定车牌" prop="vehicleName"></el-table-column>
                    <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
                    <el-table-column align="center" label="设备类型" prop="deviceTypeName"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作">
                        <template slot-scope="{row}">
                            <p>
                                <el-button @click="editDevice(row.deviceId)" style="color: #409eff" type="text">编辑
                                </el-button>
                                <el-button @click="deleteOne(row.deviceId)" style="color: #f56c6c" type="text">删除
                                </el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <!--表格结束-->
            <br>
            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :offset="6" :span="12" align="center">
                    <el-pagination :current-page="query.page" :page-size="query.size" :total="query.total"
                                   @current-change="pageChange"
                                   background layout="total, prev, pager, next">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>

    import {
        addEquipment,
        deleteDevice,
        getBrandInfo,
        getDeviceInfo,
        getDeviceTypeEnum,
        getGroupTree,
        getOneDevice,
        getVehicleInfo
    } from '@/api';
    import config, {downloadToTagByA} from '@/utils/config'
    import qs from "qs";

    export default {
        name: "index",
        components: {},
        data() {
            return {

                //品牌数据 后端查询 品牌列表集合
                brand: [],
                vehicles: [],

                //分组数
                groupTree: [],
                groupId: [],


                //校验规则
                rules: {
                    no: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                    brand: [
                        {required: true, message: '请输入内容', trigger: 'change'},
                    ],
                    groupId: [
                        {required: true, message: '请选择机构', trigger: 'change'},
                    ],
                    deviceType: [
                        {required: true, message: '请选择内容', trigger: 'change'},
                    ],
                    manufacturer: [
                        {required: true, message: '请输入内容', trigger: 'change'},
                    ],
                },

                //设备表单封装对象
                form: {
                    deviceType: '',
                    phone: '',
                    no: '',
                    deviceId: '',
                    brand: '',
                    manufacturer: '', groupId: '',
                    vehicleId: ''
                },

                //标签页控制变量
                activeName: 'first',

                config,
                //加载动画
                loading: false,

                //对话框控制变量
                dialogVisible: false,

                //设备列表
                deviceList: [],

                //设备查询参数
                query: {
                    deviceType: '',
                    no: '',
                    groupId: [],
                    total: 0,
                    size: 18,
                    page: 1
                },

                //设备导出参数
                exportDeviceVal: {
                    fromPage: 1,
                    toPage: 1,
                },

                //全选id
                deviceIds: [],

                //设备类型枚举
                deviceTypeEnum: [],
            }
        },

        watch: {},

        methods: {

            //根据分组id获取车辆
            getVehicle() {
                this.form.vehicleId = ''
                this.form.groupId = this.groupId[this.groupId.length - 1]
                getVehicleInfo({groupId: this.form.groupId}).then(
                    result => {
                        if (result.code === 200) {
                            this.vehicles = result.data.list
                        }
                    }
                )
            },

            //弹窗取消
            cancel() {
                this.dialogVisible = false
                this.form = {}
                this.$message({type: 'success', message: '取消操作'});
            },

            //编辑设备
            editDevice(id) {
                this.activename = 'first'
                this.dialogVisible = true
                getOneDevice(qs.stringify({deviceId: id})).then(
                    result => {
                        if (result.code === 200) {
                            this.form = result.data
                            if (this.form.deviceType === 0) {
                                this.form.deviceType = null
                            }
                        }
                    }
                )
            },

            //标签页点击事件
            handleClick(tab, event) {
            },

            //添加设备
            addDevice(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        addEquipment({
                            no: this.form.no,
                            phone: this.form.phone,
                            manufacturer: this.form.manufacturer,
                            brand: this.form.brand,
                            deviceId: this.form.deviceId,
                            deviceType: this.form.deviceType,
                            vehicleId: this.form.vehicleId,

                            locatorType: this.form.locatorType,
                            networkType: this.form.networkType,
                            communType: this.form.communType,
                            protocolType: this.form.protocolType,
                            differential: this.form.differential,
                            cameras: this.form.cameras,
                            limitSpeed: this.form.limitSpeed,
                            limitFlow1: this.form.limitFlow1,
                            limitFlow2: this.form.limitFlow2,

                        }).then(result => {
                            if (result.code == 200) {
                                this.queryDevice()
                                this.form = {}
                                this.dialogVisible = false
                                this.$message({type: 'success', message: '操作成功'});
                            }
                        })
                    } else {
                        this.activeName = 'first'
                        return false;
                    }
                });
            },

            //确认关闭对话框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            //导出设备模板
            downloadBtn() {
                downloadToTagByA("/api/web/taxi/ba/device/exportTemplate", {
                    time: this.date,
                })
            },
            handlePreview(file) {
            },
            handleRemove(file, fileList) {
            },
            submitUpload() {
                this.queryDevice()
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
            },

            checkAll() {
                if (this.checked == false) {
                    this.deviceIds = []
                    this.number = [];
                } else {
                    this.deviceList.forEach((item) => {
                        this.number.push(item.id)
                        this.deviceIds.push(item.id)
                    })
                }
            },

            //查询设备
            queryDevice() {
                getDeviceInfo({
                    pageNum: this.query.page,
                    no: this.query.no,
                    deviceType: this.query.deviceType,
                    groupId: this.query.groupId[this.query.groupId.length - 1]
                }).then(res => {
                    if (res != null && res.code == 200) {
                        this.deviceList = res.data.list;
                        this.query.total = res.data.count
                    } else {
                        this.$message.info(res.message)
                    }
                })
            },

            //车辆多选
            selectionchange(val) {
                this.deviceIds = []
                val.forEach(x => {
                    this.deviceIds.push(x.id)
                });
            },

            //删除全部
            deleteAll() {
                if (this.deviceIds.length != 0) {
                    this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteDevice(this.deviceIds).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.queryDevice()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择设备'});
                }
            },

            //删除方法---弹窗
            deleteOne(id) {
                this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deviceIds = []
                    this.deviceIds.push(id)
                    deleteDevice(this.deviceIds).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.queryDevice()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },

            //导出
            exportDevice() {
                let a = document.createElement('a')
                a.href = "http://192.168.1.21:2563/api/web/taxi/ba/device/exportDevice?groupId=111"
                a.click();
            },

            // 分页查询
            pageChange(val) {
                this.query.page = val
                this.queryDevice()
            },

            //获取类型枚举
            getEnums() {
                getDeviceTypeEnum().then(res => {
                    if (res.code === 200) {
                        this.deviceTypeEnum = res.data
                    }
                }).catch(() => {
                });

                //获取分组数
                getGroupTree({}).then(res => {
                    if (res.code == 200) {
                        this.groupTree = res.data.children
                    }
                })

                //获取品牌信息
                getBrandInfo({}).then(res => {
                    if (res.code == 200) {
                        this.brand = res.data
                    }
                })

            },


        },

        created() {
            this.queryDevice()
            this.getEnums()
        }

    }
</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
    }
</style>
